<template>
  <div class="ind-collapse-view">
    <div class="c-title-view" @click="toggleCollaspe()">
      <div class="icon-view">
        <i
          class="el-icon-arrow-right"
          :style="{ transform: (unfold && 'rotate(90deg)') || 'rotate(0deg)' }"
          v-if="collapsible"></i>
      </div>
      <div class="col-title">
        <span v-if="title && !$slots.title">{{ title }}</span>
        <template v-else>
          <slot name="title"></slot>
        </template>
      </div>
    </div>
    <div class="c-content" :style="{ maxHeight: (unfold && maxHeight) || 0 }">
      <div class="content-wrapper">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CollapseView',
  components: {},
  props: {
    title: {
      type: String,
    },
    collapsible: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      unfold: true,
      maxHeight: '9999px',
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    toggleCollaspe() {
      if (this.collapsible) {
        this.unfold = !this.unfold
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.ind-collapse-view {
  border: 1px solid #ebeef5;
  // 改用style控制，解决自嵌套样式污染问题
  // &.unfold {
  //   .c-content {
  //     max-height: 5000px;
  //   }
  //   .el-icon-arrow-right {
  //     transform: rotate(90deg);
  //   }
  // }
  .c-title-view {
    display: flex;
    font-size: 16px;
    width: 100%;
    overflow: hidden;
    background: #f9f9f9;
    // height: 36px;
    // line-height: 36px;
    padding: 6px 0;
    .icon-view {
      padding: 0 10px;
      i {
        transition: 0.3s;
        cursor: pointer;
      }
    }
    .col-title {
      text-align: left;
      padding-right: 15px;
      // overflow: hidden;
      // white-space: nowrap;
      // text-overflow: ellipsis;
      flex: 1;
    }
  }
  .c-content {
    max-height: 0;
    overflow: hidden;
    transition: 0.3s;
  }
  .content-wrapper {
    padding: 20px;
  }
}
</style>
